<template>
  <a-menu
    mode="inline"
    :selected-keys="selectedKeys"
    :open-keys="openNames"
    class="com-admin-main-menu"
    theme="dark"
    @click="menuSelect"
    @openChange="onOpenChange"
  >
    <template v-for="item in enumList">
      <a-menu-item v-if="item.type == 'FILE'" :key="item.path">
        <a-icon v-if="item.icon" :type="item.icon" />
        <span v-if="!collapsed">{{ item.title }}</span>
      </a-menu-item>
      <a-sub-menu v-else :key="item.path">
        <span slot="title">
          <a-icon v-if="item.icon" :type="item.icon" />
          <span v-if="!collapsed">{{ item.title }}</span>
        </span>
        <template v-for="subItem in item.children">
          <a-menu-item v-if="subItem.type == 'FILE'" :key="subItem.path">
            <a-icon v-if="subItem.icon" :type="subItem.icon" />
            {{ subItem.title }}
          </a-menu-item>
          <a-sub-menu v-else :key="subItem.path">
            <span slot="title">
              <a-icon v-if="subItem.icon" :type="subItem.icon" />
              {{ subItem.title }}
            </span>
            <a-menu-item v-for="subItem_1 in subItem.children" :key="subItem_1.path">
              <a-icon v-if="subItem_1.icon" :type="subItem_1.icon" />
              {{ subItem_1.title }}
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-sub-menu>
    </template>
  </a-menu>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import { Getter } from "vuex-class";
import MenuModel from "@/models/MenuModel";

@Component({
  name: "ComAdminMainMenu",
})
export default class Com extends Vue {
  @Prop({ type: Boolean, default: false }) collapsed!: false
  selectedKeys: Array<String> = [];
  openNames: Array<String> = [];
  @Getter("auth/MENU_LIST") enumList!: Array<MenuModel>;

  created() {
    this.setAction();
  }

  @Watch("$route")
  routeChange() {
    this.setAction();
  }

  menuSelect({key}: {key: string}) {
    this.selectedKeys = [key]
    this.$router.push(key)
  }

  setAction() {
    const {path} = this.$route;
    const [one, two, three, four, five] = path.split("/");
    if (four && !five) {
      this.selectedKeys = [`/${two}/${three}/${four}`];
      this.openNames = [`/${two}/${three}`];
    } else if (four && five) {
      this.selectedKeys = [`/${two}/${three}/${four}/${five}`];
      this.openNames = [`/${two}/${three}`, `/${two}/${three}/${four}`];
    }
  }

  onOpenChange(openKeys: Array<string>) {
    this.openNames = openKeys
  }
}
</script>

<style lang="less">
.com-admin-main-menu {
}
</style>
